{extend name="main"}
{block name="style"}
<style type="text/css">
	.w-80px {
		width: 80px;
	}

	.el-collapse {
		border: 0;
	}

	.el-collapse-item__header {
		border: 0;
	}

	.el-collapse-item__wrap {
		border: 0;
	}

	.border-lg {
		border-width: 2px !important;
	}

	.setting-item .setting-item-del {
		display: none;
	}

	.setting-item:hover .setting-item-del {
		display: block;
	}
</style>
{/block}
{block name="body"}
<div class="bg-white px-3 pb-3" style="padding-top:25px;">
	<el-form label-width="200px" :label-position="labelPosition" @submit.native.prevent="return;" v-loading="loading">
		<div v-for="(item,i) in list">
			<el-form-item v-for="(v,index) in item" :label="v.title" class="setting-item">
				<div class="setting-item-body flex flex-center">
					<div v-if="v.type==='input'" class="px-3 flex-1">
						<el-input class="col-4 px-0" :class="getInputCol(v.value)" v-model="v.value"
							@change="editConfig(v)"></el-input>
						<div class="text-muted small" v-if="v.tips">
							<el-popover placement="top-start" width="300" trigger="click" :content="v.ctype+'.'+v.key">
								<div slot="reference" v-html="warningIcon+v.tips"></div>
							</el-popover>
						</div>
					</div>
					<div v-if="v.type === 'textarea'" class="px-3 flex-1">
						<el-input type="textarea" :autosize="{ minRows: 3}" class="col-4 px-0" v-model="v.value"
							@change="editConfig(v);"></el-input>
						<div class="text-muted small" v-if="v.tips">
							<el-popover placement="top-start" width="300" trigger="click" :content="v.ctype+'.'+v.key">
								<div slot="reference" v-html="warningIcon+v.tips"></div>
							</el-popover>
						</div>
					</div>
					<div v-if="v.type === 'upload'" class="px-3 flex-1">
						<el-image v-if="v.url" class="mw-200px mh-200px" :src="v.url" :preview-src-list="[v.url]">
						</el-image>
						<div class="row mx-0 flex-center">
							<el-upload class="avatar-uploader" action="/uploadFiles" name="file" accept="image/*"
								:data="{path:'web/img',ctype:i,index:index,id:v.id}" :show-file-list="false"
								:on-success="handleAvatarSuccess" :on-error="handleAvatarError"
								:before-upload="beforeAvatarUpload">
								<el-button size="small" type="primary">选择文件</el-button>
							</el-upload>
							<div class="text-muted small px-3" v-if="v.tips">
								<el-popover placement="top-start" width="300" trigger="click"
									:content="v.ctype+'.'+v.key">
									<div slot="reference" v-html="warningIcon+v.tips"></div>
								</el-popover>
							</div>
						</div>
					</div>
					<div v-if="v.type === 'upload_file'" class="px-3 flex-1">
						<el-input class="col-4 px-0" :class="getInputCol(v.value)" v-model="v.value"
							@keyup.enter.native="editConfig(v)"></el-input>
						<div class="row mx-0 flex-center">
							<el-upload class="avatar-uploader" action="/uploadFiles" name="file"
								:data="{path:'publics/files',ctype:i,index:index,id:v.id}" :show-file-list="false"
								:on-success="handleAvatarSuccess" :on-error="handleAvatarError">
								<el-button size="small" type="primary">选择文件</el-button>
							</el-upload>
							<div class="text-muted small px-3" v-if="v.tips">
								<el-popover placement="top-start" width="300" trigger="click"
									:content="v.ctype+'.'+v.key">
									<div slot="reference" v-html="warningIcon+v.tips"></div>
								</el-popover>
							</div>
						</div>
					</div>
					<div v-if="v.type === 'switch'" class="row mx-0 px-3 flex-center flex-1">
						<el-switch v-model="v.value" active-color="#13ce66" inactive-color="#6c757d" :active-value="1"
							:inactive-value="0" @change="editConfig(v);">
						</el-switch>
						<div class="text-muted small px-3" v-if="v.tips">
							<el-popover placement="top-start" width="300" trigger="click" :content="v.ctype+'.'+v.key">
								<div slot="reference" v-html="warningIcon+v.tips"></div>
							</el-popover>
						</div>
					</div>
					<div v-if="v.type === 'radio'" class="px-3 flex-1">
						<el-radio-group v-model="v.value" @change="editConfig(v);">
							<el-radio v-for="va in v.options" :label="va.value">{{va.title}}</el-radio>
						</el-radio-group>
						<div class="text-muted small" v-if="v.tips">
							<el-popover placement="top-start" width="300" trigger="click" :content="v.ctype+'.'+v.key">
								<div slot="reference" v-html="warningIcon+v.tips"></div>
							</el-popover>
						</div>
					</div>
					<div v-if="v.type === 'checkbox'" class="px-3 flex-1">
						<el-checkbox-group v-model="v.value" @change="editConfig(v);">
							<el-checkbox v-for="va in v.options" :label="va.value">{{va.title}}</el-checkbox>
						</el-checkbox-group>
						<div class="text-muted small" v-if="v.tips">
							<el-popover placement="top-start" width="300" trigger="click" :content="v.ctype+'.'+v.key">
								<div slot="reference" v-html="warningIcon+v.tips"></div>
							</el-popover>
						</div>
					</div>
					<div v-if="v.type === 'select'" class="row mx-0 px-3 flex-center flex-1">
						<el-select v-model="v.value" @change="editConfig(v);">
							<el-option v-for="item in v.options" :key="item.value" :label="item.title"
								:value="item.value">
							</el-option>
						</el-select>
						<div class="text-muted small px-3" v-if="v.tips">
							<el-popover placement="top-start" width="300" trigger="click" :content="v.ctype+'.'+v.key">
								<div slot="reference" v-html="warningIcon+v.tips"></div>
							</el-popover>
						</div>
					</div>
					<div v-if="v.type === 'color'" class="row mx-0 px-3 flex-center flex-1">
						<el-color-picker v-model="v.value" show-alpha @change="editConfig(v);">
						</el-color-picker>
						<div class="text-muted small px-3" v-if="v.tips">
							<el-popover placement="top-start" width="300" trigger="click" :content="v.ctype+'.'+v.key">
								<div slot="reference" v-html="warningIcon+v.tips"></div>
							</el-popover>
						</div>
					</div>
					<div v-if="v.type === 'date'" class="row mx-0 px-3 flex-center flex-1">
						<el-date-picker v-model="v.value" type="date" placeholder="选择日期" @change="editConfig(v);">
						</el-date-picker>
						<div class="text-muted small px-3" v-if="v.tips">
							<el-popover placement="top-start" width="300" trigger="click" :content="v.ctype+'.'+v.key">
								<div slot="reference" v-html="warningIcon+v.tips"></div>
							</el-popover>
						</div>
					</div>
					<div v-if="v.type === 'time'" class="row mx-0 px-3 flex-center flex-1">
						<el-time-picker v-model="v.value" arrow-control :picker-options="{
					selectableRange: '00:00:00 - 23:59:59'
					}" value-format="H:m:s" placeholder="选择时间" @change="editConfig(v);">
						</el-time-picker>
						<div class="text-muted small px-3" v-if="v.tips">
							<el-popover placement="top-start" width="300" trigger="click" :content="v.ctype+'.'+v.key">
								<div slot="reference" v-html="warningIcon+v.tips"></div>
							</el-popover>
						</div>
					</div>
					<div v-if="v.type === 'datetime'" class="row mx-0 px-3 flex-center flex-1">
						<el-date-picker v-model="v.value" type="datetime" placeholder="选择日期时间" @change="editConfig(v);">
						</el-date-picker>
						<div class="text-muted small px-3" v-if="v.tips">
							<el-popover placement="top-start" width="300" trigger="click" :content="v.ctype+'.'+v.key">
								<div slot="reference" v-html="warningIcon+v.tips"></div>
							</el-popover>
						</div>
					</div>
					<div v-if="v.type === 'array'" class="mx-0 px-3 flex-1">
						<el-tag :key="tag" v-for="tag in v.value" closable effect="plain" class="mr-1"
							:disable-transitions="false" @close="handleClose(v,tag)">
							{{tag}}
						</el-tag>
						<el-input class="w-80px" v-if="inputVisible" v-model="inputValue" ref="saveTagInput"
							size="small" @keyup.enter.native="handleInputConfirm(v)" @blur="handleInputConfirm(v)">
						</el-input>
						<el-button v-else size="small" @click="showInput">添加</el-button>
						<div class="text-muted small" v-if="v.tips">
							<el-popover placement="top-start" width="300" trigger="click" :content="v.ctype+'.'+v.key">
								<div slot="reference" v-html="warningIcon+v.tips"></div>
							</el-popover>
						</div>
					</div>
				</div>
			</el-form-item>
		</div>
		<el-form-item class="setting-item">
			<div class="setting-item-body px-3">
				<el-button type="primary" :loading="loading" @click="submitConfig">保存</el-button>
			</div>
		</el-form-item>

	</el-form>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="Data"}
	var list=[];
	{else/}
	var list={:json_encode($Data,JSON_UNESCAPED_UNICODE)};
	var formItemShow=[];
	for (var x in list) {
		for (var i in list[x]) {
			formItemShow.push(list[x][i].ctype+'.'+list[x][i].key);
		}
	}
	{/empty}
</script>
<script>
	/*{empty name="Data"}*/
	var list = [];
	/*{else/}*/
	var list = JSON.parse('{:json_encode($Data,JSON_UNESCAPED_UNICODE)}'.replace(/[\r\n\s+]/g, '\\n'))
	
	var formItemShow = [];
	for (var x in list) {
		for (var i in list[x]) {
			formItemShow.push(list[x].ctype + '.' + list[x].key);
		}
	}
	/*{/empty}*/
</script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			view: XYBase.view,
			labelPosition: 'right',
			warningIcon: '<i class="el-icon-warning-outline mr-1 text-primary"></i>',
			loading: false,
			inputVisible: false,
			inputValue: '',
			WaitingSubmit: [],
			formItemShow: [],
			list: list
		},
		watch: {
			view: XYBase.viewWatch,
		},
		created() {
			XYBase.created(this);
			this.setFormItemShow();
		},
		methods: {
			setFormItemShow() {
				this.formItemShow = ["work_wechat.work_wechat_corpid", "work_wechat.work_wechat_corpsecret", "work_wechat.work_wechat_token", "work_wechat.work_wechat_url", "work_wechat.work_wechat_encodingaeskey"];
			},
			delSetting(index, row) {
				var _this = this;
				this.$confirm('是否确定删除【' + row.title + '】配置？', '提示', {
					confirmButtonText: '删除',
					cancelButtonText: '取消',
					dangerouslyUseHTMLString: true,
					type: 'warning'
				}).then(() => {
					const loading = XYBase.openloading();
					$.getJSON('/setting/del/' + row.id, function (ret) {
						loading.close();
						if (ret) {
							if (ret.code === 0) {
								_this.list.splice(index, 1);
							} else XYBase.msg(ret.msg);
						} else XYBase.error(XYBase.config.system_network_error);
					});
				}).catch(() => {
					XYBase.msg('已取消');
				});
			},
			handleClose(val, tag) {
				val.value.splice(val.value.indexOf(tag), 1);
				this.editConfig(val);
			},
			showInput() {
				this.inputVisible = true;
				this.$nextTick(_ => {
					this.$refs.saveTagInput[0].$refs.input.focus();
				});
			},
			handleInputConfirm(val) {
				let inputValue = this.inputValue;
				if (inputValue) {
					val.value.push(inputValue);
				}
				this.inputVisible = false;
				this.inputValue = '';
				this.editConfig(val);
			},
			getInputCol(val) {
				return 'w-480px';
				var cla = '';
				if (!val) return 'col-sm-2';
				switch (true) {
					case val.length > 200:
						cla = 'col-sm-12';
						break;
					case val.length > 180:
						cla = 'col-sm-11';
						break;
					case val.length > 160:
						cla = 'col-sm-10';
						break;
					case val.length > 140:
						cla = 'col-sm-9';
						break;
					case val.length > 120:
						cla = 'col-sm-8';
						break;
					case val.length > 100:
						cla = 'col-sm-7';
						break;
					case val.length > 80:
						cla = 'col-sm-6';
						break;
					case val.length > 60:
						cla = 'col-sm-5';
						break;
					case val.length > 40:
						cla = 'col-sm-4';
						break;
					case val.length > 20:
						cla = 'col-sm-3';
						break;
					default:
						cla = 'col-sm-2';
						break;
				}
				return cla;
			},
			handleAvatarSuccess: function (res, file) {
				if (res) {
					if (res.code === 0) {
						if (res.data.type == 'web/img') {
							if (this.list[res.data.ctype] && this.list[res.data.ctype][res.data.index] && this.list[res.data.ctype][res.data.index].id == res.data.id) {
								this.list[res.data.ctype][res.data.index].value = res.data.path;
								this.list[res.data.ctype][res.data.index].url = res.data.url;
								this.editConfig(this.list[res.data.ctype][res.data.index]);
							}
						} else if (res.data.type == 'publics/files') {
							if (this.list[res.data.ctype] && this.list[res.data.ctype][res.data.index] && this.list[res.data.ctype][res.data.index].id == res.data.id) {
								this.list[res.data.ctype][res.data.index].value = res.data.path;
								this.editConfig(this.list[res.data.ctype][res.data.index]);
							}
						}
						XYBase.success(res.msg);
					} else { XYBase.error(res.msg); }
				} else { XYBase.error(XYBase.config.system_network_error) }
			},
			handleAvatarError: function (res, file) {
				XYBase.error(XYBase.config.system_network_error)
			},
			beforeAvatarUpload: function (file) {
				const isJPGPNG = XYBase.config.imageMime.indexOf(file.type) >= 0;
				const isLt10M = file.size / 1024 <= 10240;

				if (!isJPGPNG) {
					XYBase.error('缩略图只能是PNG格式');
					return false;
				}
				if (!isLt10M) {
					XYBase.error('缩略图大小不能超过 10M!');
					return false;
				}
				return isJPGPNG && isLt10M;
			},
			editConfig(val) {
				var isBreak = true;
				for (var i = 0; i < this.WaitingSubmit.length; i++) {
					if (this.WaitingSubmit[i].ctype == val.ctype && this.WaitingSubmit[i].key == val.key) {
						this.WaitingSubmit[i] = val;
						isBreak = false;
						break;
					}
				}
				if (isBreak)
					this.WaitingSubmit.push(val);
			},
			submitConfig() {
				if (this.WaitingSubmit.length) {
					this.submitConfigAjax();
				} else {
					return XYBase.success('保存成功');
				}
			},
			submitConfigAjax() {
				var _this = this;
				var val = this.WaitingSubmit[0];
				if (!val) return XYBase.success('保存成功');
				_this.loading = true;
				$.ajax({
					url: '/setting/edit',
					data: val,
					type: 'post',
					dataType: 'json',
					success: function (ret) {
						_this.loading = false;
						if (ret) {
							if (ret.code == 0) {
								_this.WaitingSubmit.splice(0, 1);
							}
							_this.submitConfigAjax();
						} else {
							XYBase.error(XYBase.config.system_network_error);
						}
					},
					error: function (err) {
						_this.loading = false;
						XYBase.error(XYBase.config.system_network_error);
					}
				});
			}
		}
	});
	$(function () {
		reloadWindowSize();
		$(window).resize(function () {
			reloadWindowSize();
		});
	});
	function reloadWindowSize(argument) {
		var winW = $(window).width();
		if (winW <= 576) {
			vm.labelPosition = 'top';
		} else {
			vm.labelPosition = 'right';
		}
	}
	window.onbeforeunload = function (e) {
		if (vm.WaitingSubmit.length) {
			vm.$confirm('有配置还未保存，确定离开当前页面吗？', '提示', {
				confirmButtonText: '保存',
				cancelButtonText: '不保存',
				type: 'warning'
			}).then(() => {
				vm.submitConfig();
			}).catch(action => {
				if (action == 'cancel') {
					vm.WaitingSubmit.length = [];
					XYBase.msg('已放弃保存');
				} else {
					XYBase.msg('已取消');
				}
			});
			var e = window.event || e;
			e.returnValue = ("确定离开当前页面吗？");
		}
	}
</script>
{/block}